<template>
	<view class="">
		<!-- <uni-nav-bar left-icon="back" :left-text="`第${currentIndex}集`" :fixed="true" :statusBar="true"
			@clickLeft="goBack">
		</uni-nav-bar> -->
		<scroll-view scroll-y="true" class="warp">
			<view class="widget-video">
				<view class="scroll-video-box" :style="{'marginTop':marginTop+'px','transition':transition}">
					<view v-for="(item, index) in videoList" :key="index" style="width: 100vw;height: 100vh;">
						<i @click="dbClickAnimation" class="iconfont iconxihuan fabulous-item"
							:style="{'top':fabulous.top,'left':fabulous.left,'opacity':fabulous.opacity,'transform':fabulous.transform}"
							v-for="(fabulous, fabulousIndx) in fabulousArr" :key="fabulousIndx"></i>
						<i :class="['iconfont iconbofang btn-play',currentStatus == 'pause' && currentIndex == item.sort ? 'show' : '']"
							@click="pauseVideo"></i>
						<video @click="pauseVideo" preload="auto" :http-cache="true" :play-strategy="1" :id="item.id"
							class="fullscreen-video" :src="item.url" controls :show-fullscreen-btn="false"
							:autoplay="index == 0" @controlstoggle="controlstoggle" @play="handlePlay(item)"
							@ended="videoEnd" @timeupdate="timeupdate" @touchstart="touchStart" @touchmove="touchMove"
							@touchend="touchEnd">
						</video>
						<view class="video-info" v-if="showInfo">
							<!-- 视频主 -->
							<view class="atavar-box" @click.stop="clickImage(item)">
								<image class="atavar-img" :src="admin.cover" mode="widthFix">
								</image>
								<view class="add-follow-btn" v-if="!admin.concern">
									<i class="iconfont iconjia1 inline-block"></i>
								</view>
							</view>
							<!-- 喜欢 -->
							<view class="icon-box" @click.stop="toggleFabulous(item, index)">
								<i :class="['iconfont iconxihuan icon-btn', item.love ? 'color-red' : '']"></i>
								<view class="count-text">{{give_count}}</view>
							</view>
							<!-- 评论区按钮 -->
							<!-- <view class="icon-box" @click="commontAdd">
								<i class="iconfont iconIMliaotian-shixin icon-btn"></i>
								<view class="count-text">25</view>
							</view> -->
							<!-- 微信分享 -->
							<button open-type="share" class="icon-box">
								<!-- <image class="weixin-img" src="../../static/weixin2.png" mode=""></image> -->
								<!-- <view class="count-text">{{item.share_count}}</view> -->
							</button>
							<!-- 追剧 -->
							<view class="icon-box" @click="addVideo(item)" v-if="!showBtn">
								<image class="add-img" src="../../static/dianying.png" mode=""></image>
								<!-- <i class="iconfont iconIMliaotian-shixin icon-btn"></i> -->
								<view class="count-text">追剧</view>
							</view>
						</view>
						<!-- 订阅通知 -->
						<van-popup :show="show" @close="onClose" :lock-scroll="true" :safe-area-inset-bottom="true"
							position="bottom" custom-style="height: 50%;padding:0px 10px 4px 10px;z-index:100000;">
							<view class="popup" v-roll:visible="bodyVisible">
								<view class="popup-bottom" v-if="!showBtn">
									<text class="popup-text">每日12点更新一集，点击追剧获取更新通知</text>
									<text class="popup-btn" @click="addVideo(item)">追剧</text>
								</view>
								<view class="popup-bottom" v-else>
									<text class="popup-text">点击更新提醒了解剧集更新状态</text>
									<text class="popup-btn" @click="getguanzhu">更新提醒</text>
								</view>
								<view class="popup-top">
									{{title}}丨更新至{{collectList.length}}集
								</view>
								<view class="selectBox">
									<view class="selectItem" v-for="(el,index) in collectList" :key="index"
										@click="goDetails(el,index)">
										<image :class="{active: el.sort === currentIndex}" :src="img" mode=""></image>
										<view class="selectText">
											第{{el.sort}}集
										</view>
										<view class="lockBox" v-if="el.is_pay == 1" @click="unLockPay(el)">
											<image src="../../static/lock.png" mode="widthFix"></image>
										</view>
										<view class="lockBox" v-if="el.is_members == 1&&is_members == 0"
											@click="unLockMembers(el)">
											<view class="">
												<image src="../../static/lock.png" mode="widthFix"></image>
												<view class="is_members">
													会员提前看
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</van-popup>
						<view class="" v-if="iosFlag == true">
							<!-- 章节结束弹窗 -->
							<van-popup :show="Endshow" @close="onEndClose" :lock-scroll="true"
								:safe-area-inset-bottom="true" position="bottom"
								custom-style="height: auto;padding:20px 10px 4px 10px;">
								<view class="popup" v-roll:visible="bodyVisible">
									<!-- 会员弹窗 -->
									<view class="popup1-bottom" v-if="item.is_members == 1&&is_members == 0">
										<view class="popup-text">本集是会员剧集</view>
										<view class="popup-text">感谢您对作者的支持,开通会员后继续观看</view>
										<view>
											<image v-if="is_members == 1" class="icon-Image"
												src="../../static/huiyuan1-01.png" mode=""><text
													style="color: orange;">开通会员即可免费观看</text>
										</view>
										<view class="popup-vip" v-if="item.is_members == 1&&is_members == 0"
											@click="memberPay(item)">
											会员解锁剧集
										</view>
									</view>
									<!-- 付费弹窗 -->
									<view class="popup1-bottom" v-if="item.is_pay == 1">
										<view class="popup-text">本集是付费剧集</view>
										<view class="popup-text">感谢您对作者的支持,购买后继续观看</view>
										<text class="popup-btn2" @click="openPay(item)">点击购买本集</text>
										<view class="popup-pay" v-if="is_members == 0" @click="openMemberPay(item)">
											开通会员,充值额外赠送K币 ></view>
										<view class="popup-gold" v-if="item.is_members == 0">账户余额：<text
												style="color: #D81E06;margin-right: 8rpx;">{{book_currency}}</text> K币
										</view>
									</view>
									<view v-if="item.is_pay == 0&&item.is_members==0">
										<view class="popup1-bottom" v-if="!showBtn">
											<view>--- 加入追剧，每日12点更新一集 ---</view>
											<view class="popup-text">每日12点更新一集</view>
											<view class="popup-text">点击追剧获取更新通知</view>
											<text class="popup-btn" @click="addVideo(item)">追剧</text>
											<view class="popup-vip" v-if="item.is_members == 1&&is_members == 0"
												@click="memberPay(item)">
												会员解锁剧集
											</view>
										</view>
										<view class="popup1-bottom" v-else>
											<view>--- 追剧成功，每日12点更新一集 ---</view>
											<view class="popup-text">关注公众号</view>
											<view class="popup-text">剧集更新随时掌握</view>
											<text class="popup-btn" @click="gogzh">关注公众号</text>
											<view class="popup-vip" v-if="item.is_members == 1&&is_members == 0"
												@click="memberPay(item)">
												会员解锁剧集
											</view>
										</view>
									</view>
								</view>
							</van-popup>
							<van-popup :show="Endshow2" @close="onEndClose2" :lock-scroll="true"
								:safe-area-inset-bottom="true" position="bottom"
								custom-style="height: auto;padding:20px 10px 4px 10px;">
								<view class="popup1-bottom" v-if="!showBtn">
									<view v-if="item.is_members == 1&&is_members == 0">--- 本剧为会员专享剧集 ---</view>
									<view v-else-if="item.is_pay == 1">--- 本剧为收费剧集 ---</view>
									<view v-else>--- 连载中，已经看完最新一集 ---</view>
									<view class="popup-text">每日12点更新一集</view>
									<view class="popup-text">点击追剧获取更新通知</view>
									<text class="popup-btn" @click="addVideo(item)">追剧</text>
									<view class="popup-vip" v-if="item.is_members == 1&&is_members == 0"
										@click="memberPay(item)">
										会员解锁剧集
									</view>
								</view>
								<view class="popup1-bottom" v-else>
									<view v-if="item.is_members == 1&&is_members == 0">--- 本剧为会员专享剧集 ---</view>
									<view v-else-if="item.is_pay == 1">--- 本剧为付费剧集 ---</view>
									<view v-else>--- 追剧成功，每日12点更新一集 ---</view>
									<view class="popup-text">关注公众号</view>
									<view class="popup-text">剧集更新随时掌握</view>
									<text class="popup-btn" @click="gogzh">关注公众号</text>
									<view class="popup-vip" v-if="item.is_members == 1&&is_members == 0"
										@click="memberPay(item)">
										会员解锁剧集
									</view>
								</view>
							</van-popup>
						</view>
						<!-- 选集弹窗按钮 -->
						<view class="video-title" v-if="showInfo">
							<view class="video-tip" color="#ffffff" background="rgba(195, 195, 195, 0.3);"
								:scrollable="false" @click="showpopu(item,index)">
								『{{title}}』 第{{item.sort}}集丨选集 >
							</view>
						</view>
						<!-- 退除追剧弹出层 -->
						<van-popup :show="Mainshow">
							<view class="Main-popup">
								<view>加入追剧</view>
								<view class="popup-text">喜欢本剧就加入追剧吧</view>
								<view class="popupBtns">
									<text class="popup-react" @click="reactVideo">不用了</text>
									<text class="popup-add" @click="zjVideo(item)">加入追剧</text>
								</view>
							</view>
						</van-popup>
						<!-- 开通会员弹出层 -->
						<view class="" v-if="iosFlag == true">
							<van-popup :show="membersShow" position="bottom" overlay-style="background-color: #000000;"
								custom-style="height: auto;padding:20px 10px 4px 10px;" @close="onClose2"
								:safe-area-inset-bottom="true" :style="{ width: '100%' }">
								<view class="MainBox">
									<view @click="goMembersPage">
										<image v-if="is_members == 1" class="icon-Image"
											src="../../static/huiyuan1-01.png" mode=""><text
												style="color: orange;">开通会员即可免费观看</text><text
												style="color: #1D1D1D;font-size: 22rpx;">了解更多会员特权 ></text>
									</view>
									<view class="view-list">
										<view v-for="(item,index) in list" :key="index"
											:class="{active: index === current}" @click="handleClick(item,index)">
											<view>{{item.moth}}</view>
											<view class="discountPrice">{{item.discountPrice}}</view>
											<view class="originalPrice">{{item.originalPrice}}</view>
										</view>
									</view>
									<view class="openHuiyuan" @click="openHuiyuan">
										立即开通
									</view>
								</view>
							</van-popup>
						</view>
						<!-- K币充值 -->
						<view class="" v-if="iosFlag == true">
							<van-popup :show="costShow" position="bottom" overlay-style="background-color: #000000;"
								custom-style="height: auto;padding:20px 10px 4px 10px;" @close="onClose3"
								:safe-area-inset-bottom="true">
								<view class="costBox">
									<view>
										充值K币
									</view>
									<view class="weixin-box">
										<view class="">
											<image src="../../static/weixin.png" mode=""></image>
											<text>微信充值</text>
										</view>
										<view class="">
											账户余额：<text
												style="color: orange;margin-right: 8rpx;">{{book_currency}}</text> K币
										</view>
									</view>
									<view class="view-list">
										<view v-for="(item,index) in cateList" :key="index"
											:class="{active: index === current}" @click="selectCate(item,index)">
											<view class="num1">
												{{item.name}}
											</view>
											<view class="">
												<text>{{item.original_currency}}</text>
												<text class="tip"
													v-if="item.send_currency.length>0">+{{item.send_currency}}</text>
											</view>
											<view class="content">
												{{item.send_title}}
											</view>
											<view class="saleStyle" v-if="item.label.length>0">
												<text class="saleText">{{item.label}}</text>
											</view>
										</view>
										<!-- <view class="popup-bottom">
											<text>会员充值可获赠更多K币</text>
											<van-button color="linear-gradient(to right, #f7e622, #b8ae18)" round
												size="normal" @click="goDetailsCenter">
												去开通
											</van-button>
										</view> -->
									</view>
									<view class="openHuiyuan" @click="goCost">
										立即充值
									</view>
								</view>
							</van-popup>
						</view>
					</view>
				</view>
				<!-- 评论区 -->
				<!-- <view :class="['commont-box',commontShow ? 'active' : '']">
					<view class="commont-title">5578条评论</view>
					<view class="commont-list">
						<view v-for="(item, index) in 20" :key="index">
							<view class="comment-panel">
								<image class="first-user" src="../../static/ddLogo.png" mode="widthFix"></image>
								<view class="first-comment">
									<view class="comment-name">Yjyyyyyy</view>
									<view class="comment-content">
										这是一条测试评论这是一条测试评论这是一条测试评论这是一条测试评论这是一条测试评论这是一条测试评论
									</view>
									<view class="time-box">
										<text class="inline-block">昨天22:00</text>
										<view class="inline-block reply-btn">回复</view>
									</view>
								</view>
								<view class="fabulous-box">
									<i class="iconfont iconxihuan fabulous-btn"></i>
									<view class="fabulous-text">3731</view>
								</view>

							</view>
							<view style="padding-left: 70rpx;">
								<view class="comment-panel">
									<image class="first-user" src="" mode="widthFix"></image>
									<view class="first-comment">
										<view class="comment-name">Yjyyyyyy</view>
										<view class="comment-content">
											这是一条测试评论这是一条测试评论这是一条测试评论这是
										</view>
										<view class="time-box">
											<text class="inline-block">昨天22:00</text>
											<view class="inline-block reply-btn">回复</view>
										</view>
									</view>
									<view class="fabulous-box">
										<i class="iconfont iconxihuan fabulous-btn"></i>
										<view class="fabulous-text">3731</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getRecommendVideo,
		getaddPlay,
		getaddHistory,
		getMyLike,
		getSmallTheaterDetails,
		Subscribe,
		getBookGold,
		getBookorder,
		getPayVideo,
		login,
		getMoneyList
	} from '@/module/index.js'
	let app = getApp()
	export default {
		data() {
			return {
				give_count: 0,
				membersObj: null,
				costObj: null,
				iosFlag: app.globalData.iosFlag,
				costShow: false,
				current: 0,
				membersShow: false,
				showInfo: true,
				book_currency: 0,
				expiration_time: "--",
				BarHeight: 0,
				title: "",
				Mainshow: false,
				show: false,
				Endshow: false,
				Endshow2: false,
				num: 3371,
				sharenum: 521,
				// 双击点赞记录
				fabulousArr: [],
				// 记录点击时间判断单击还是双击，单击暂停，双击点赞
				clickTimer: null,
				// 记录点击时间
				clickTime: 0,
				// 屏幕高度
				windowHeight: uni.getSystemInfoSync().windowHeight || window.innerHeight,
				// 动画效果
				transition: 'none',
				// 触摸开始值
				startY: 0,
				// 触摸移动值
				moveY: 0,
				// 滑动开始时间
				startTime: 0,
				// 向上滑动距离
				marginTop: 0,
				// 每次向上滑动的距离
				fixMarginTop: 0,
				// 滑动方向
				moveDirection: '',
				// 当前轮播的index
				currentIndex: 0,
				// 当前页的视频对象
				currentVideo: null,
				// 视频状态：播放/暂停
				currentStatus: 'play',
				videoList: [],
				// 是否显示评论
				commontShow: false,
				// 评论列表
				commentList: [

				],
				id: "",
				collectList: [],
				startData: {
					clientX: 0,
					clientY: 0
				},
				img: "",
				showBtn: false,
				admin: {},
				video_id: "",
				video_detail_id: "",
				nextId: "",
				lastId: "",
				is_members: 0,
				isPay: 0,
				isMembers: 0,
				list: [{
						moth: `1个月`,
						discount: `6.6折`,
						originalPrice: `18/元`,
						discountPrice: `¥12`,
						money: 1200,
						num: 1
					},
					{
						moth: `3个月`,
						discount: `5.1折`,
						originalPrice: `54/元`,
						discountPrice: `¥28`,
						money: 2800,
						num: 3
					}, {
						moth: `12个月`,
						discount: `4.5折`,
						originalPrice: `216/元`,
						discountPrice: `¥98`,
						money: 9800,
						num: 12
					}
				],
				cateList: [{
						num: `10元`,
						text: `1000`,
						tip: ` +500 K币`,
						content: `多送5元K币`,
						money: 1000,
						bookNum: 1500,
						saletip: "特惠"
					},
					{
						num: `5元`,
						text: `500 K币`,
						tip: ``,
						content: ``,
						money: 500,
						bookNum: 500,
						saletip: ""
					},
					{
						num: `20元`,
						text: `2000`,
						tip: ` +400 K币`,
						content: `多送4元K币`,
						money: 2000,
						bookNum: 2400,
						saletip: ""
					},
					{
						num: `30元`,
						text: `3000`,
						tip: ` +600 K币`,
						content: `多送6元K币`,
						money: 3000,
						bookNum: 3600,
						saletip: ""
					},
					{
						num: `50元`,
						text: `5000`,
						tip: ` +2500 K币`,
						content: `多送25元K币`,
						money: 5000,
						bookNum: 7500,
						saletip: ""
					},
					{
						num: `100元`,
						text: `10000`,
						tip: ` +5000 K币`,
						content: `多送50元K币`,
						money: 10000,
						bookNum: 15000,
						saletip: ""
					},
				]
			};
		},
		onShow() {
			// this.show = true
			this.getMoneyList()
			this.getBookGold()
		},
		onUnload() {
			console.log(`点击返回`)
			this.getaddHistory()
		},
		onLoad(option) {
			if (uni.getStorageSync('token') == "") {
				uni.showToast({
					title: "null",
					icon: "none"
				})
				this.getCode()
			} else {
				console.log(option)
				this.video_id = option.video_id
				this.video_detail_id = option.video_detail_id
				this.getVideoDetails(this.video_id, this.video_detail_id)
			}
		},
		onTabItemTap(e) {
			console.log(e);
			// e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
		},
		onReady() {
			// 初始化拿到第一个视频对象
			if (this.videoList.length == 0) {
				return false
			} else {
				this.currentVideo = uni.createVideoContext(this.videoList[0].id.toString(), this);
			}
		},
		methods: {
			goMembersPage() {
				uni.navigateTo({
					url: `/wxcomponents/MembershipCenter/MembershipCenter`,
					fail() {
						uni.switchTab({
							url: `/wxcomponents/MembershipCenter/MembershipCenter`,
							fail() {
								uni.showToast({
									title: '敬请期待',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			// 会员中心
			goDetailsCenter() {
				uni.navigateTo({
					url: `/wxcomponents/MembershipCenter/MembershipCenter`,
					fail() {
						uni.switchTab({
							url: `/wxcomponents/MembershipCenter/MembershipCenter`,
							fail() {
								uni.showToast({
									title: '敬请期待',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			openHuiyuan() {
				this.getBookorder(this.list[this.current])
			},
			handleClick(el, index) {
				this.current = index
				this.membersObj = el
			},
			// 微信支付
			selectCate(item, index) {
				console.log(item.money)
				this.current = index
				this.costObj = item
			},
			goCost() {
				this.getBookorder2(this.cateList[this.current])
			},
			getMoneyList() {
				getMoneyList().then((res) => {
					if (res.code === 200) {
						console.log(res)
						this.cateList = res.data.data
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			handlePlay(item) {
				console.log(item)
				if (app.globalData.iosFlag == false) {
					return
				}
				if (item.is_pay == 1) {
					this.videoList[0].url = null
				} else if (item.is_members == 1 && this.is_members == 0) {
					this.videoList[0].url = null
				}
			},
			controlstoggle(event) {
				console.log(event.detail)
				this.showInfo = !event.detail.show
			},
			getBookorder(item) {
				let obj = {
					total_fee: item.money,
					name: item.moth,
					number: item.num,
					type: 2
				}
				getBookorder(obj).then((res) => {
					var self = this
					if (res.code === 200) {
						console.log(res.data)
						var record_id = res.data.pay_record_id
						uni.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.paySign,
							success(res) {
								console.log(res)
								self.membersShow = false
								setTimeout(function() {
									self.getBookGold()
									self.Endshow = true
									self.getVideoDetails(self.video_id, self.videoList[0].id)
								}, 1000);
							},
							fail(err) {
								console.log(err)
								if (err.errMsg = "requestPayment:fail cancel") {
									uni.showToast({
										title: `取消支付`,
										icon: 'none'
									});
								} else {
									uni.showToast({
										title: `支付失败`,
										icon: 'none'
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getBookorder2(item) {
				let obj = {
					total_fee: item.name * 100,
					name: item.name,
					number: item.sum_currency
				}
				getBookorder(obj).then((res) => {
					var self = this
					if (res.code === 200) {
						console.log(res.data)
						var record_id = res.data.pay_record_id
						uni.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.paySign,
							success(res) {
								console.log(res)
								self.costShow = false
								setTimeout(function() {
									self.getBookGold()
									self.getVideoDetails(self.video_id, self.videoList[0].id)
								}, 1000);
							},
							fail(err) {
								console.log(err)
								if (err.errMsg = "requestPayment:fail cancel") {
									uni.showToast({
										title: `取消支付`,
										icon: 'none'
									});
								} else {
									uni.showToast({
										title: `支付失败`,
										icon: 'none'
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getBookGold() {
				getBookGold().then((res) => {
					if (res.code === 200) {
						console.log(res)
						this.book_currency = res.data.data.book_currency
						this.is_members = res.data.data.is_members
						this.expiration_time = res.data.data.expiration_time
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			memberPay(el) {
				console.log(el)
				this.membersShow = true
			},
			openPay(el) {
				console.log(el)
				this.getPayVideo(el.id)
				this.costShow = true
			},
			openMemberPay(el) {
				console.log(el)
				this.membersShow = true
			},
			unLockPay(el) {
				this.show = false
				this.getPayVideo(el.id)
			},
			unLockMembers(el) {
				this.show = false
				if (this.is_members == 0 && el.is_members == 1) {
					this.membersShow = true
				}
				this.getVideoDetails(el.video_id, el.id)
			},
			goBack() {
				this.show = false
				if (this.showBtn == true) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					this.costShow = false
					this.Mainshow = true
				}
			},
			reactVideo() {
				this.Mainshow = false
				uni.navigateBack({
					delta: 1
				});
			},
			zjVideo(item) {
				console.log(item)
				// 发起请求
				let obj = {
					video_id: item.video_id,
					video_detail_id: item.id,
					sort: item.sort
				}
				getaddPlay(obj).then((res) => {
					console.log(res)
					if (res.code === 200) {
						uni.showToast({
							title: "追剧成功",
							icon: "none"
						})
						this.showBtn = true
						uni.navigateBack({
							delta: 1
						});
						// this.getRecommendVideo()
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getPayVideo(id) {
				let obj = {
					video_detail_id: id
				}
				getPayVideo(obj).then((res) => {
					this.getVideoDetails(this.video_id, id)
					this.getBookGold()
					let stoTimer = setTimeout(() => {
						clearTimeout(stoTimer)
						stoTimer = null
						if (res.code === 401) {
							if (app.globalData.iosFlag == false) {
								return
							}
							uni.showToast({
								title: res.message,
								icon: "none"
							})
							this.costShow = true
						} else {
							console.log(res)
						}
					}, 500)
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取视频详情数据
			getVideoDetails(video_id, id) {
				let obj = {
					video_id: video_id,
					video_detail_id: id
				}
				getSmallTheaterDetails(obj).then((res) => {
					if (res.code === 200) {
						console.log(res)
						this.videoList[0] = res.data.video
						this.give_count = res.data.video.give_count
						this.collectList = res.data.collect
						this.showBtn = res.data.chase
						this.admin = res.data.admin
						this.img = res.data.cover
						this.title = res.data.video_name
						this.currentIndex = res.data.video.sort
						this.nextId = res.data.video.next
						this.lastId = res.data.video.last
						this.isMembers = res.data.video.is_members
						this.isPay = res.data.video.is_pay
						uni.setNavigationBarTitle({
							title: `第${res.data.video.sort}集`
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 触摸开始
			touchStart(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
			},
			// 触摸滑动
			touchMove(e) {
				if (this.show == true) {
					e.preventDefault();
				}
			},
			// 滑动切换视频
			touchEnd(e) {
				// console.log(e)
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				const subY = e.changedTouches[0].clientY - this.startData.clientY;
				if (subY > 50) {
					console.log(`大于50`)
					if (this.lastId == "") {
						return uni.showToast({
							title: "到顶了",
							icon: "none"
						})
					} else {
						this.getPayVideo(this.lastId)
						let stoTimer = setTimeout(() => {
							clearTimeout(stoTimer)
							stoTimer = null
							if (this.isPay == 1) {
								return this.costShow = true
							} else if (this.isMembers == 1 && this.is_members == 0) {
								return this.membersShow = true
							}
						}, 500)
					}
				} else if (subY < -50) {
					console.log(`小于-50`)
					if (this.nextId == "") {
						this.Endshow2 = true
						return uni.showToast({
							title: "到底了",
							icon: "none"
						})
					} else {
						this.getPayVideo(this.nextId)
						let stoTimer = setTimeout(() => {
							clearTimeout(stoTimer)
							stoTimer = null
							if (this.isPay == 1) {
								return this.costShow = true
							} else if (this.isMembers == 1 && this.is_members == 0) {
								return this.membersShow = true
							}
						}, 500)
					}
				} else {
					// if (subX > 100) {
					// 	this.goUpzj()
					// } else if (subX < -100) {
					// 	this.goNext()
					// } else {
					// 	console.log('无效')
					// }
				}
			},
			// 滑动切换
			videoPlayChange() {
				this.stopOtherVideo();
				let video = uni.createVideoContext(this.videoList[0].id.toString(), this);
				video.play();
				video.seek(3);
				this.currentStatus = 'play';
				this.currentVideo = video;
			},
			// 暂停其他视频
			stopOtherVideo() {
				this.videoList.map(v => {
					let video = uni.createVideoContext(v.id.toString(), this);
					// video.stop();
					video.seek(1);
					video.pause();
				})
			},
			// 暂停/播放视频/双击点赞事件
			pauseVideo(e) {
				if (this.commontShow) {
					this.commontShow = false;
					return;
				}
				clearTimeout(this.clickTimer);
				let currentTime = new Date().getTime();
				let timeRange = currentTime - this.clickTime;
				if (timeRange < 300) {
					// 双击事件
					this.dbClickAnimation(e);
				} else {
					// 单击事件
					this.clickTimer = setTimeout(() => {
						e.preventDefault();
						e.stopPropagation();
						// if (this.currentStatus == 'play') {
						// 	this.currentVideo.pause();
						// 	this.currentStatus = 'pause';
						// } else {
						// 	this.currentVideo.play();
						// 	this.currentStatus = 'play';
						// }
					}, 300);
				}
				this.clickTime = new Date().getTime();
			},
			// 视频主信息页面
			clickImage(el) {
				uni.navigateTo({
					url: `/wxcomponents/createdWarp/index?id=` + this.admin.admin_id + '&video_id=' + el.video_id
				});
			},
			// 订阅接口
			Subscribe() {
				Subscribe().then((res) => {
					console.log(res)
					if (res.code === 200) {
						console.log(res)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 订阅
			getguanzhu() {
				var self = this
				wx.requestSubscribeMessage({
					tmplIds: ['xdw4IeAJAWdrHqqQcmQvGvqlKEOxawlosj5F1CoiB5c',
						"VmFNZ3ak5cYoQm9jyH8C02c4FWGL7mxPKXjBeC_RI_Y"
					],
					success(res) {
						// console.log(res.BXKBCd14XKdd_I5X70DcHqMeNgABetFxXA5_92OluCU, `成功`)
						let status = res.errMsg
						if (status == "requestSubscribeMessage:ok") {
							uni.showToast({
								title: `订阅更新提醒成功`,
								icon: "none"
							})
							let stoTimer = setTimeout(() => {
								clearTimeout(stoTimer)
								stoTimer = null
								self.Subscribe()
							}, 500)
						} else {
							uni.showToast({
								title: `小主求订阅`,
								icon: "none"
							})
						}
					},
					fail(res) {
						console.log(res, `失败`)
					},
					complete() {

					}
				})
			},
			// 喜欢请求
			getMyLike(item, type) {
				// 发起请求
				let obj = {
					video_id: item.video_id,
					video_detail_id: item.id,
					type: type
				}
				getMyLike(obj).then((res) => {
					console.log(res)
					if (res.code === 200) {
						console.log(res)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			gogzh() {
				uni.navigateTo({
					url: "/wxcomponents/officialAccount/officialAccount"
				});
			},
			// 获取观看记录
			getaddHistory() {
				console.log(this.videoList[0])
				// 发起请求
				let obj = {
					video_id: this.videoList[0].video_id,
					video_detail_id: this.videoList[0].id
				}
				getaddHistory(obj).then((res) => {
					if (res.code === 200) {
						console.log(res)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 追剧
			addVideo(item) {
				console.log(item)
				// 发起请求
				let obj = {
					video_id: item.video_id,
					video_detail_id: item.id,
					sort: item.sort
				}
				getaddPlay(obj).then((res) => {
					console.log(res)
					if (res.code === 200) {
						uni.showToast({
							title: "追剧成功",
							icon: "none"
						})
						this.showBtn = true
						this.getguanzhu()
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 双击点赞动画
			dbClickAnimation(e) {
				let deg = Math.round(Math.random() * 40 + 5);
				this.fabulousArr.push({
					left: e.detail.x - 25 + 'px',
					top: e.detail.y - 25 + 'px',
					transform: 'rotate(' + (deg % 2 == 0 ? deg : -deg) + 'deg)'
				})
				console.log(this.fabulousArr);
				let index = this.fabulousArr.length - 1;
				setTimeout(() => {
					this.$set(this.fabulousArr, index, Object.assign(this.fabulousArr[index], {
						opacity: 0,
						transform: 'scale(3) ' + this.fabulousArr[index].transform
					}))
				}, 500);
				setTimeout(() => {
					this.fabulousArr.shift();
				}, 1000);
				if (!this.videoList[0].love) {
					this.$set(this.videoList, 0, Object.assign(this.videoList[0], {
						love: true
					}))
					this.give_count += 1
					this.getMyLike(this.videoList[0], 1)
				}
			},
			// 点赞切换
			toggleFabulous(item, index) {
				this.$set(this.videoList, index, Object.assign(item, {
					love: item.love ? false : true
				}));
				if (item.love == true) {
					console.log(`喜欢`)
					this.getMyLike(item, 1)
					this.give_count += 1
				} else {
					console.log(`不喜欢`)
					this.getMyLike(item, 2)
					if (this.num == 0) {
						uni.showToast({
							title: "求个赞",
							icon: "none"
						})
					} else {
						this.give_count -= 1
					}
				}
			},
			// 评论
			commontAdd() {
				this.commontShow = true;
			},
			// 选集弹窗
			showpopu(item, index) {
				this.show = true
			},
			// 选集弹窗按钮
			onClose() {
				this.show = false
			},
			onClose2() {
				this.membersShow = false
			},
			onClose3() {
				this.costShow = false
			},
			// 自动播放弹窗按钮
			onEndClose() {
				this.Endshow = false
			},
			onEndClose2() {
				this.Endshow2 = false
			},
			// 自动播放
			videoEnd() {
				console.log("播完了")
				if (this.nextId == "") {
					this.Endshow2 = true
					return uni.showToast({
						title: "到底了",
						icon: "none"
					})
				} else {
					this.getPayVideo(this.nextId)
					let stoTimer = setTimeout(() => {
						clearTimeout(stoTimer)
						stoTimer = null
						if (this.isPay == 1) {
							return this.costShow = true
						} else if (this.isMembers == 1 && this.is_members == 0) {
							return this.membersShow = true
						}
					}, 500)
				}
			},
			// 当前播放时间
			timeupdate(event) {
				// console.log(event.detail)
			},
			// 选集播放
			goDetails(el, index) {
				console.log(el)
				this.getVideoDetails(el.video_id, el.id)
			},
			getCode() {
				var self = this
				wx.login({
					success(res) {
						// console.log(res)
						if (res.code) {
							//这里可以设置需要传递的参数
							// console.log(res.code, `code`)
							// return false
							let obj = {
								code: res.code,
							}
							//发起登录请求
							login(obj).then((res) => {
								console.log(res, `Token`)
								if (res.code === 200) {
									uni.setStorageSync('token', res.data.token)
								} else {
									uni.showToast({
										title: res.message,
										icon: "none"
									})
								}
							}).catch(err => {
								console.log(err)
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './yjy-video-slide.css';

	page {
		position: relative;
	}

	.warp {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 100%;
	}

	// 喜欢按钮动画
	.iconxihuan {
		transition: all .3s;
	}

	.iconxihuan:active {
		transform: scale(2);
	}

	// 双击点赞样式
	.fabulous-item {
		position: absolute;
		z-index: 99999;
		width: 100rpx;
		height: 100rpx;
		color: red;
		font-size: 100rpx;
		transition: opacity .5s, transform .5s;
		opacity: 1;
	}

	// 评论框
	.commont-box {
		position: absolute;
		z-index: 9;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 60%;
		overflow-y: auto;
		background-color: #222;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		transition: all .3s;
		transform: translateY(100%);
		display: flex;
		flex-direction: column;

		.commont-title {
			text-align: center;
			color: white;
			font-size: 24rpx;
			margin: 20rpx 0;
			font-weight: bold;
		}

		.commont-list {
			flex: 1;
			overflow-y: auto;

			.comment-panel {
				margin: 30rpx 40rpx;
				display: flex;

				.first-user {
					width: 50rpx;
					height: 50rpx;
					border-radius: 100%;
				}

				.first-comment {
					flex: 1;
					margin: 0rpx 20rpx;

					.comment-name {
						font-size: 24rpx;
						font-weight: bold;
						color: #999;
					}

					.comment-content {
						color: white;
						font-size: 26rpx;
						margin-top: 10rpx;
					}

					.time-box {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #999;

						.reply-btn {
							margin-left: 20rpx;
						}
					}
				}

				.fabulous-box {
					text-align: center;

					.fabulous-btn {
						font-size: 36rpx;
						color: #666;
					}

					.fabulous-text {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}

	.commont-box.active {
		transform: translateY(0);
	}

	.widget-video {
		width: 100%;
		height: 100%;
		// overflow: hidden;

		.btn-play {
			font-size: 80rpx;
			color: white;
			position: absolute;
			top: 0;
			left: 50%;
			transition: all .3s;
			transform: translateX(-50%) translateY(-50%) scale(1.5);
			z-index: 8;
			opacity: 0;
		}

		.btn-play.show {
			opacity: 0.5;
			transform: translateX(-50%) translateY(-50%) scale(1);

		}
	}

	.fullscreen-video {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.video-info {
		width: 100rpx;
		position: absolute;
		right: 20rpx;
		bottom: 120rpx;

		.atavar-box {
			background-color: white;
			padding: 6rpx;
			border-radius: 100%;
			height: 100rpx;
			margin-bottom: 64rpx;

			.atavar-img {
				width: 100%;
				display: block;
				border-radius: 100%;
			}

			.add-follow-btn {
				width: 40rpx;
				height: 40rpx;
				padding: 4rpx;
				border-radius: 100%;
				color: white;
				background-color: red;
				position: absolute;
				bottom: -24rpx;
				left: 50%;
				transform: translateX(-50%);
				font-weight: bold;
				text-align: center;
				line-height: 32rpx;

				.iconjia1 {
					font-size: 24rpx;
				}
			}
		}

		.icon-box {
			width: 100rpx;
			height: 100rpx;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: column;
			color: white;
			background: rgba(133, 133, 133, 0);

			.add-img {
				width: 60rpx;
				height: 60rpx;
			}

			.weixin-img {
				width: 70rpx;
				height: 70rpx;
			}

			.icon-btn {
				font-size: 60rpx;
				vertical-align: middle;
			}

			.count-text {
				font-size: 24rpx;
			}
		}
	}

	.video-title {
		position: absolute;
		left: 20rpx;
		bottom: 30rpx;
		// width: calc(100% - 160rpx);
		width: 100%;
		color: white;

		.video-tip {
			color: #FFFFFF;
			background: rgba(127, 127, 127, 0);
		}

		.user-name {
			font-weight: bold;
		}

		.video-content {
			margin-top: 20rpx;
			margin-bottom: 24rpx;
			font-size: 24rpx;
		}
	}

	button {
		background-color: rgba(255, 255, 255, 0);
	}

	.popup {
		position: relative;
		width: 100%;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}

	.popup-top {
		padding: 10px 0px;
		position: sticky;
		top: 0px;
		left: 0rpx;
		z-index: 100000000;
		background-color: #FFFFFF;
	}


	.popup-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px 20rpx;
		box-sizing: border-box;
		z-index: 10000;
		height: 80rpx;
		background-color: #EAEAEA;
	}

	.popup-text {
		font-size: 24rpx;
	}

	.popup-btn {
		width: 110px;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #DF851D;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		display: inline-block;
		// margin-bottom: 20rpx;
	}

	.popup-btn2 {
		width: 140px;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #DF851D;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		display: inline-block;
		margin-bottom: 20rpx;
	}

	.popup-pay {
		color: #DF851D;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.popup-gold {
		text-align: left;
		position: fixed;
		bottom: 40rpx;
	}

	.popup-vip {
		width: 160px;
		height: 60rpx;
		line-height: 60rpx;
		border: 1px solid #DF851D;
		border-radius: 30rpx;
		color: #DF851D;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		margin: 0 auto;
	}

	.selectBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.selectBox:after {
		display: block;
		content: "";
		width: 28%;
		height: 0px;
	}

	.selectItem {
		width: 28%;
		position: relative;
	}

	.selectItem image {
		width: 100%;
		height: 260rpx;
		border-radius: 8rpx;
	}

	.selectItem .lockBox {
		width: 100%;
		height: 260rpx;
		border-radius: 8rpx;
		background-color: rgba(1, 1, 1, 0.5);
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
	}

	.lockBox image {
		width: 45px;
		height: 45px;
		margin: 0 auto;
	}

	.is_members {
		color: #FFFFFF;
		font-size: 20rpx;
	}

	.selectItem .active {
		border: 1px solid #ff5500;
		box-shadow: 1px 1px 10px;
	}

	.selectText {
		font-weight: bold;
		font-size: 28rpx;
		text-indent: 6rpx;
		text-align: center;
	}

	.popup1-bottom {
		text-align: center;
		line-height: 80rpx;
		padding-bottom: 30rpx;
	}

	.popupBtns {
		display: flex;
	}

	.Main-popup {
		padding: 30rpx 30rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.popup-add {
		display: inline-block;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #DF851D;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		margin-left: 8rpx;
	}

	.popup-react {
		display: inline-block;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		color: #c8c8c8;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		border: 1px solid #EAEAEA;
	}

	.openHuiyuan {
		text-align: center;
		color: #FFFFFF;
		background-color: #F25011;
		margin-top: 20rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.icon-Image {
		width: 18px;
		height: 16px;
	}

	.MainBox {
		.view-list {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 24rpx;
			box-sizing: border-box;
		}

		.view-list>view {
			border: 1px solid #808080;
			text-align: center;
			width: 30%;
			padding: 40rpx 0rpx;
		}

		.discountPrice {
			font-weight: 900;
			color: black;
			font-size: 50rpx;
		}

		.originalPrice {
			color: #bebebe;
			text-decoration: line-through;
		}

		.view-list>.active {
			border: 1px solid #f75200;
			background-color: #fea97e;
			opacity: 0.8;
		}
	}

	.costBox {
		.view-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}

		.view-list>.active {
			border: 1px solid #D9D9D9;
			background-color: #e21f0d;
			opacity: 0.8;
			color: #fff;
		}

		.view-list:after {
			display: block;
			content: "";
			width: 44%;
			height: 0px;
		}

		.view-list>view {
			width: 44%;
			padding: 10rpx 0rpx;
			border: 1px solid #d9d9d9;
			text-align: center;
			margin: 20rpx 0rpx;
			position: relative;
			overflow: hidden;
		}

		.saleStyle {
			position: absolute;
			top: 0rpx;
			right: -78rpx;
			width: 0rpx;
			height: 0rpx;
			border: 76rpx solid #000;
			border-color: #000000 transparent transparent transparent;
			color: #FFFFFF;
		}

		.saleText {
			position: absolute;
			top: -68rpx;
			right: -2rpx;
			font-size: 20rpx;
			width: 30px;
			transform: rotate(45deg);
		}

		.weixin-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.view-list>.popup-bottom {
			background-color: #808080;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 0px 20rpx;
		}

		.tip {
			color: #df851d;
		}

		.num {
			// font-size: 40rpx;
			// font-weight: 900;
		}

		image {
			width: 60px;
			height: 60px;
			vertical-align: middle;
		}

		.content {
			color: #df851d;
			font-size: 30rpx;
		}
	}
</style>
